<template>
	<div class="booktype">
		<el-menu>
			<el-menu-item :index="`${item.id}`" v-for="item in typebook" :key="item.id">
				<router-link :to="`/pc/booklist?&book_id=${item.id}`" >
					{{item.name}}
				</router-link>
			</el-menu-item>
		</el-menu>
	</div>
</template>

<script>
	export default{
		name : 'PCNavig',
		data() {
			return{
				//定义一个空的书籍类型数组
				typebook:[]
			}
		},
		methods:{
			getbooktype(){
				this.$get("/api/public/type/findAll2").then((res)=>{
					let arr = res.data.data;
					console.log(this.typebook);
					for (let i = 0; i < arr.length; i++) {
						if (arr[i].pid == 0) {
							this.typebook.push(arr[i]);
						}
						if (this.typebook.length > 8) break;
					}
				})
			}
		},
		mounted() {
			this.getbooktype();
		}
	}
</script>

<style scoped>
	.booktype{
		width: 90%;
		border: 1px solid #d9deff;
		border-right: 1px solid #d9deff;
		height: 400px; /* 可以根据需要调整高度，这里使用视口高度 */  
		overflow-y: auto; /* 允许垂直滚动 */  
	}
	.booktype::-webkit-scrollbar {
	  display: none; /* Chrome, Safari and Opera */  
	}
	.booktype .el-menu-item a{
		display: block;
		width: 100%;
		text-align: center;
		color: #aaaaff;
		text-decoration: none;
	}  
</style>